<!doctype html>
<html>
  <head>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-132775238-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'UA-132775238-1');
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1, user-scalable=yes">
    <link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;600&family=Roboto+Mono&display=swap" rel="stylesheet">

    <style>
      .btn{
        width: 48px;
        height: 48px;
        color: #444;
        font-size: 12px;
        display: block;
        margin: 2px;
        border-radius: 4px;
        cursor:pointer;
        outline:none;
        font-size:30px;
      }
      .side-nav{
        display:flex;
        margin: 2px;
        padding:2px;
        align-items: stretch;
        height:44px; cursor: pointer; 
        border-radius:2px; 
        background: #fff;
      }
      .normal{ background-color: orange; color :#333; border: 2px solid #444; width:64px;font-size:12px;}
      .dark{ background-color: #424242; color :#BBB; border: 2px solid #BBB;}
      .night{ background-color: #23282e; color :#aec2e0; border: 2px solid #aec2e0;}
      .mud{ background-color: #4f4544; color :#c3b8b7; border: 2px solid #c3b8b7;}
      .cofee{ background-color: #45403b; color :#ceb8a0; border: 2px solid #ceb8a0;}
      .forest{ background-color: #475153; color :#BDD6DB; border: 2px solid #BDD6DB;}
      .olive{ background-color: #393e40; color :#acc7c8; border: 2px solid #acc7c8;}
      .outerspace{ background-color: #3c4042; color :#CAD9E3; border: 2px solid #CAD9E3;}
      .ebony{ background-color: #3a3f4a; color :#dee3ec; border: 2px solid #dee3ec;}

      .light{ background-color: #f0f0f0; color :#626262; border: 2px solid #626262; }
      .snow{ background-color: #ebebeb; color :#737373; border: 2px solid #737373;  }
      .green{ background-color: #eaeee8; color :#557d39; border: 2px solid #557d39; }
      .blue{ background-color: #dde2e8; color :#315681; border: 2px solid #315681;  }
      .beige{ background-color: #eee9de; color :#524627; border: 2px solid #524627; }

    </style>
    <script type="text/javascript" src="../rapidoc-min.js"></script>
    <script>
      function getRapiDoc(){
        return document.getElementById("thedoc");
      }  

      function changeSchemaStyle() {
        let docEl = getRapiDoc();
        if (docEl.getAttribute('schema-style') === 'table'){
          docEl.setAttribute('schema-style',"tree");
        }
        else{
          docEl.setAttribute('schema-style',"table");
        }
      }

      function changeTheme(themeName){
        let docEl = getRapiDoc();
        docEl.setAttribute('show-header','');
        docEl.setAttribute('bg-color','');
        docEl.setAttribute('text-color','');
        docEl.setAttribute('nav-bg-color','');
        docEl.setAttribute('nav-text-color','');
        docEl.setAttribute('nav-hover-bg-color','');
        docEl.setAttribute('nav-hover-text-color','');
        docEl.setAttribute('nav-accent-color','');
        docEl.setAttribute('primary-color','');
        if (themeName === 'dark'){
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#333');
          docEl.setAttribute('text-color','#BBB');
        } else if (themeName === 'light'){
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#FFF');
          docEl.setAttribute('text-color','#444');
        } else if (themeName === 'night') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#14191f');
          docEl.setAttribute('text-color','#aec2e0');
        } else if (themeName === 'mud') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#403635');
          docEl.setAttribute('text-color','#c3b8b7');
        } else if (themeName === 'cofee') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#36312C');
          docEl.setAttribute('text-color','#ceb8a0');
        } else if (themeName === 'forest') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#384244');
          docEl.setAttribute('text-color','#BDD6DB');
        } else if (themeName === 'olive') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#2a2f31');
          docEl.setAttribute('text-color','#acc7c8');
        } else if (themeName === 'outerspace') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#2D3133');
          docEl.setAttribute('text-color','#CAD9E3');
        } else if (themeName === 'ebony') {
          docEl.setAttribute('theme','dark');
          docEl.setAttribute('bg-color','#2B303B');
          docEl.setAttribute('text-color','#dee3ec');
        } else if (themeName === 'snow') {
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#FAFAFA');
          docEl.setAttribute('text-color','#555');
        } else if (themeName === 'green') {
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#f9fdf7');
          docEl.setAttribute('text-color','#375F1B');
        } else if (themeName === 'blue') {
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#ecf1f7');
          docEl.setAttribute('text-color','#133863');
        } else if (themeName === 'beige') {
          docEl.setAttribute('show-header','true');
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#fdf8ed');
          docEl.setAttribute('text-color','#342809');
        } else if (themeName === 'graynav') {
          getRapiDoc().setAttribute('render-style', 'read' );
          docEl.setAttribute('show-header','false');
          docEl.setAttribute('theme','light');
          docEl.setAttribute('nav-bg-color','#3e4b54');
          docEl.setAttribute('nav-accent-color','#fd6964');
          docEl.setAttribute('primary-color','#ea526f');
        }  else if (themeName === 'purplenav') {
          getRapiDoc().setAttribute('render-style', 'read' );
          docEl.setAttribute('show-header','false');
          docEl.setAttribute('theme','light');
          docEl.setAttribute('nav-accent-color','#ffd8e7');
          docEl.setAttribute('nav-bg-color','#666699');
          docEl.setAttribute('primary-color','#ea526f');
          docEl.setAttribute('bg-color','#fff9fb');
        } else if (themeName === 'lightgraynav') {
          getRapiDoc().setAttribute('render-style', 'read' );
          docEl.setAttribute('show-header','false');
          docEl.setAttribute('theme','light');
          docEl.setAttribute('nav-bg-color','#fafafa');
          docEl.setAttribute('nav-hover-text-color','#9b0700');
          docEl.setAttribute('nav-hover-bg-color','#ffebea');
          docEl.setAttribute('primary-color','#F63C41');
          docEl.setAttribute('bg-color','#ffffff');
        } else if (themeName === 'darkbluenav') {
          getRapiDoc().setAttribute('render-style', 'read' );
          docEl.setAttribute('show-header','false');
          docEl.setAttribute('theme','light');
          docEl.setAttribute('bg-color','#f9f9fa');
          docEl.setAttribute('nav-bg-color','#3f4d67');
          docEl.setAttribute('nav-text-color','#a9b7d0');
          docEl.setAttribute('nav-hover-bg-color','#333f54');
          docEl.setAttribute('nav-hover-text-color','#fff');
          docEl.setAttribute('nav-accent-color','#f87070');
          docEl.setAttribute('primary-color','#5c7096');
        }
        
      }

      function changeSpec(){
        let docEl = getRapiDoc();
        if (docEl.getAttribute('spec-url').includes('bitbucket')){
          docEl.setAttribute('spec-url',"../specs/petstore_extended.yaml");
        }
        else{
          docEl.setAttribute('spec-url',"../specs/bitbucket.json");
        }
      }

      function changeRenderStyle() {
        let currRender = getRapiDoc().getAttribute('render-style');
        let newRender = currRender === "read" ? "view" : "read";
        getRapiDoc().setAttribute('render-style', newRender );
      }

    </script>
  </head>
  <body>
    <rapi-doc id="thedoc" spec-url="../specs/petstore_extended.yaml" regular-font="Open Sans" mono-font = "Roboto Mono" show-header="false">
      

      <div style="display:flex; justify-content:center;flex-wrap: wrap;background-color:rgba(128, 128, 128, 0.1); flex:1; padding:22px;">
        <button class="btn normal" onclick="changeRenderStyle()">Render Style</button>
        <button class="btn dark" onclick="changeTheme('dark')">&#9782; </button>
        <button class="btn night" onclick="changeTheme('night')"> &#9782; </button>
        <button class="btn mud" onclick="changeTheme('mud')"> &#9782; </button>
        <button class="btn cofee" onclick="changeTheme('cofee')"> &#9782; </button>
        <button class="btn forest" onclick="changeTheme('forest')"> &#9782; </button>
        <button class="btn olive" onclick="changeTheme('olive')"> &#9782; </button>
        <button class="btn outerspace" onclick="changeTheme('outerspace')"> &#9782; </button>
        <button class="btn ebony" onclick="changeTheme('ebony')"> &#9782; </button>

        <button class="btn light" onclick="changeTheme('light')"> &#9782; </button>
        <button class="btn snow" onclick="changeTheme('snow')"> &#9782; </button>
        <button class="btn green" onclick="changeTheme('green')"> &#9782; </button>
        <button class="btn blue" onclick="changeTheme('blue')"> &#9782; </button>
        <button class="btn beige" onclick="changeTheme('beige')"> &#9782; </button>
        <div class = 'side-nav'  style="background:#3f4d67" onclick="changeTheme('darkbluenav')" >
          <div style='width:20px;'></div>
          <div style='background: #f9f9fa; padding:0px 4px; font-size:30px; color:#5c7096'> &#9782;</div>
        </div>
        <div class = 'side-nav'  style="background:#666699" onclick="changeTheme('purplenav')" >
          <div style='width:20px;'></div>
          <div style='background: #fff9fb; padding:0px 4px; font-size:30px; color:#ea526f'> &#9782;</div>
        </div>
        <div class = 'side-nav'  style="background:#ccc;" onclick="changeTheme('lightgraynav')" >
          <div style='width:20px;'></div>
          <div style='background: #fff; padding:0px 4px; font-size:30px; color:#F63C41'> &#9782;</div>
        </div>
        <div class = 'side-nav'  style="background:#3e4b54" onclick="changeTheme('graynav')" >
          <div style='width:20px;'></div>
          <div style='background: #fff; padding:0px 4px; font-size:30px; color:#444'> &#9782;</div>
        </div>
      </div>
    </rapi-doc>
  </body>
</html>